<template>
    <el-card class="form-container" shadow="never">
        <el-form :rules="addRules" ref="addForm" :model="addForm" label-width="130px" size="small"> 
            <el-form-item label="参数类型" :required="true">
                <el-radio v-model="addForm.type" label="0">属性</el-radio>
                <el-radio v-model="addForm.type" label="1">参数</el-radio>
            </el-form-item>
            <el-form-item label="属性名称" :required="true">
                <el-input v-model="addForm.name" placeholder="属性名称"></el-input>
            </el-form-item>
            <el-form-item label="商品类型">
                <el-select v-model="addForm.productAttributeCategoryId" placeholder="请选择">
                    <el-option v-for="item in attributeCategoryOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="分类筛选样式">
                <el-radio v-model="addForm.filterType" label="0">普通</el-radio>
                <el-radio v-model="addForm.filterType" label="1">颜色</el-radio>
            </el-form-item>
            <el-form-item label="能否进行检索">
                <el-radio v-model="addForm.searchType" label="0">不需要检索</el-radio>
                <el-radio v-model="addForm.searchType" label="1">关键字检索</el-radio>
                <el-radio v-model="addForm.searchType" label="2">范围检索</el-radio>
            </el-form-item>
            <el-form-item label="商品属性关联">
                <el-radio v-model="addForm.relatedStatus" label="1">是</el-radio>
                <el-radio v-model="addForm.relatedStatus" label="0">否</el-radio>
            </el-form-item>

            <el-form-item label="属性是否可选">
                <el-radio v-model="addForm.selectType" label="0">唯一</el-radio>
                <el-radio v-model="addForm.selectType" label="1">单选</el-radio>
                <el-radio v-model="addForm.selectType" label="2">多选</el-radio>
            </el-form-item>

            <el-form-item label="属性值的录入方式">
                <el-radio v-model="addForm.inputType" label="0">手工录入</el-radio>
                <el-radio v-model="addForm.inputType" label="1">从下面列表中选择</el-radio>
            </el-form-item>

            <el-form-item label="属性可选值列表">
                <el-input v-model="addForm.inputList" placeholder="属性值可选值列表"></el-input>
            </el-form-item>

            <el-form-item label="是否支持手动新增">
                <el-radio v-model="addForm.handAddStatus" label="0">不支持</el-radio>
                <el-radio v-model="addForm.handAddStatus" label="1">支持</el-radio>
            </el-form-item>

            <el-form-item label="排序属性">
                <el-input v-model="addForm.sort" placeholder="排序属性"></el-input>
            </el-form-item>
            <el-form-item style="text-align: center;">
                <el-button type="primary" size="medium" @click="save">提交</el-button>
            </el-form-item> 
        </el-form>
    </el-card>
</template>
<script>
import {queryPmsProductAttributeCategoryList, addPmsProductAttribute} from '@/api/pmsApi'
export default {
    name: 'PmsProductAttributeAdd',
    data() {
        return {
            addRules: {

            },
            addForm: {
                type: '0',
                name: '',
                productAttributeCategoryId: '',
                filterType: '0',
                searchType: '0',
                relatedStatus: '0',
                selectType: '0',
                inputType: '0',
                inputList: '',
                handAddStatus: '0',
                sort: ''
            },
            attributeCategoryOptions: [],
        }
    },
    mounted() {
        queryPmsProductAttributeCategoryList({}).then(response => {
            let data = response.data;
            this.attributeCategoryOptions = [];
            data.forEach((item, index) => {
                if (index == 0) {
                    this.productAttributeCategoryId = item.id;
                }
                const objItem = {
                    value: item.id,
                    label: item.name
                }
                this.attributeCategoryOptions.push(objItem);
            });
        });
    },
    methods: {
        save() {
            const params = this.addForm;
            addPmsProductAttribute(params).then(response => {
                this.$message("保存参数成功!");
                location.reload();
            });
        }
    }
}
</script>    

<style scoped>
    .form-container{
        text-align: left;
    }
</style>